<!DOCTYPE html>
<html  lang="zh-CN"  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title th:text="${#themes.code('cas.page.title')}"></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" th:href="@{${#themes.code('cas.myself.bootstrap.css')}}"/>
    <link rel="stylesheet" th:href="@{${#themes.code('cas.myself.awesome.css')}}"/>
    <link rel="stylesheet" th:href="@{${#themes.code('cas.myself.material.css')}}"/>
    <link rel="stylesheet" th:href="@{${#themes.code('cas.myself.util.css')}}"/>
    <link rel="stylesheet" th:href="@{${#themes.code('cas.myself.main.css')}}"/>

    <script th:src="@{${#themes.code('cas.javascript.jquery.file')}}"></script>
    <script th:src="@{${#themes.code('cas.javascript.main.file')}}"></script>

</head>

<body>

<div class="limiter">
    <div class="container-login100">
        <div class="wrap-login100 p-l-55 p-r-55 p-t-35 p-b-32">
            <form class="login100-form validate-form" method="post" th:object="${credential}">
                <span class="login100-form-title p-b-15">登录</span>
                <div class="wrap-input100 validate-input m-b-5" data-validate="请输入用户名">
                    <span class="label-input100">用户名</span>
                    <!--<label for="password" th:utext="#{screen.welcome.label.password}" style="display: none"/>-->
                    <input class="input100" id="username"   type="text" placeholder="请输入用户名"
                           th:disabled="${guaEnabled}"
                           th:field="*{username}"
                           th:accesskey="#{screen.welcome.label.netid.accesskey}"
                           autocomplete="off"
                           th:value="admin" />
                    <span class="focus-input100" data-symbol="&#xf206;"></span>
                </div>

                <div class="wrap-input100 validate-input m-b-5" data-validate="请输入密码">
                    <span class="label-input100">密码</span>
                    <!--<label for="password" th:utext="#{screen.welcome.label.password}" style="display:none"/>-->
                    <input class="input100" type="password" id="password"  placeholder="请输入密码"
                           th:accesskey="#{screen.welcome.label.password.accesskey}"
                           th:field="*{password}"
                           autocomplete="off"
                           th:value="123456" />
                    <span class="focus-input100" data-symbol="&#xf190;"></span>
                </div>
                <!--验证码 后面添加判断-->
                <div th:if="${rememberMeAuthenticationEnabled}" class="wrap-input100 validate-input m-b-23" data-validate="请输入验证码">
                    <span class="label-input100">验证码</span>
                    <input class="input100"  style="width:71%" type="text"
                           placeholder="请输入验证码"
                           id="captcha"
                           name="captcha"
                           size="10"
                           th:field="*{captcha}"
                           autocomplete="off"/>
                    <span class="focus-input100" data-symbol="&#xf129;"></span>
                    <div style="right:0;top:17px;position:absolute;cursor:pointer;">
                        <img th:src="@{/captcha.jpg}" id="captcha_img" onclick="javascript:refreshCaptcha()" alt="点击更换图片"/>
                    </div>
                </div>
                <div class="p-b-8" th:if="${rememberMeAuthenticationEnabled}" style="position:absolute;font-family: 'Microsoft Yahei';font-size: 14px;color: #666;">
                    <div class="checkbox-group">
                        <input type="checkbox" name="rememberMe" id="rememberMe" value="true" tabindex="5">
                        <span>记住密码</span>
                    </div>
                </div>
                <!--th:unless="${passwordManagementEnabled}" 忘记密码配置-->
                <div class="text-right p-b-8">
                    <a href="javascript:">忘记密码？</a>
                </div>
                <!--提交按钮-->
                <div class="container-login100-form-btn">
                    <div class="wrap-login100-form-btn">
                        <div class="login100-form-bgbtn"></div>
                        <!--<button class="login100-form-btn">登 录</button>-->
                        <input type="hidden" name="execution" th:value="${flowExecutionKey}" />
                        <input type="hidden" name="_eventId" value="submit" />
                        <input type="hidden" name="geolocation" />
                        <!--<input class="login100-form-btn" name="submit" accesskey="l" th:value="#{screen.welcome.button.login}" type="submit"/>-->
                        <button class="login100-form-btn" name="submit" accesskey="l" th:value="#{screen.welcome.button.login}">登 录</button>
                    </div>
                </div>
                <!--错误提示-->
                <div th:if="${#fields.hasErrors('*')}" class="p-t-5" style="font-size: 10px;font-weight:600;text-align: center;color: #f03;">
                    <span th:each="err : ${#fields.errors('*')}" th:utext="${err}"/>
                </div>
                <!--第三方登录-->
                <div th:if="${pac4jUrls}" class="flex-c-m p-t-10" style="display:inherit">
                    <div class="txt1 text-center p-t-8 p-b-10">
                        <span>第三方登录</span>
                    </div>
                    <div class="d-social-block">
                        <ul>
                            <li th:each="entry,userStat:${pac4jUrls}" th:switch="${entry.name}">
                                <a class="login100-social-item"
                                   th:classappend="'bg'+${userStat.index+1}"
                                   th:href="@{${entry.redirectUrl}}"
                                   th:attr="autoredirect=${entry.autoRedirect}"
                                   th:inline="text"
                                   th:title="${entry.name}">

                                    <i  th:case="微信" class="fa fa-wechat"></i>
                                    <i  th:case="QQ" class="fa fa-qq"></i>
                                    <i  th:case="CSDN" class="fa fa-weibo"></i>
                                </a>
                            </li>
                        </ul>
                       <!-- <ul>
                            <li>
                                <a href="#" class="login100-social-item bg1">
                                    <i class="fa fa-wechat"></i>
                                </a>
                            </li>
                        </ul>-->
                    </div>
                </div>

                <div class="flex-col-c p-t-25" style="display:inline;text-align: center;float:left;">
                    <a href="javascript:">忘记密码？</a>
                </div>
                <div class="flex-col-c p-t-25" style=" float: right;display: inline;text-align: center;">
                    <a href="javascript:" class="txt2">立即注册</a>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    function refreshCaptcha(){
        $("#captcha_img").attr("src","/cas/captcha.jpg?id=" + new Date() + Math.floor(Math.random()*24));
    }
</script>
</html>